<template>
	<view style="height: 100%;">
		<titlebar :back="true" :text="title" img="../../static/right_share.png" @rightIconClick='shareShow'
			backgroundColor="#00000000">

		</titlebar>
		
		<view class="tabs" :style="'padding-top:'+navigationBarHeight">
			<u-tabs  :activeStyle="{color: '#3d3a3a',fontWeight: '700'}" :inactiveStyle="{
            color: '#ADB0AE',fontWeight: '400'}" :scrollable="false" :list="tabsList" @click="selectSort"></u-tabs>
		</view>

		<z-paging ref="paging" v-model="list" @query="queryList" :fixed="false" :auto="false">
			<view class="wraper" ref="custom_card">
				<!-- 个人信息卡片 -->
				<view class="custom_card">
					<view class="custom_card_wraper">
						<image class="custom_card_bg" src="@appstatic/car/custom_card_bg.png" mode="">
						</image>
						<view class="custom_card_left">
							<view>
								<image class="user_img" :src="currentInfo.currentUser.userImages||'@appstatic/my/my_icon_avatar_unlogin.png'" mode=""></image>
								<image class="avatar-bottom" src="@appstatic/my/my_icon_avatar_bottom.png" mode="">
								</image>
							</view>
							<view class="user_name">
								<view>{{currentInfo.currentUser.nickName}}</view>
								<view class="custom_card_sort">第<text> {{currentInfo.currentUser.rank}} </text>名</view>
							</view>

						</view>
						<view class="custom_card_km">{{currentInfo.currentUser.mile}}km</view>
					</view>
					<view class="custom_card_bottom">
						<view @click="changeCity">
							<text>{{provinceId>0?'本省(市、自治区)':'全国'}}</text>
							<image class="arrow_bottom" mode="" src="@appstatic/car/arrow_bottom.png"></image>
						</view>
						<view>统计至：{{currentInfo.deadline}}
							<image @click="showHelp" class="custom_card_help" src="@appstatic/car/help.png" mode="">
							</image>
						</view>
					</view>
				</view>

				<!-- 排行列表 -->

				<view class="list">
					<view class="list-item" v-for="(item,index) in list" :key="index">
						<view class="list-item-left">
							<!-- <image v-if="item.rank<=9" class="list_number" :src="'@appstatic/community/'+item.rank+'.png'" alt="">
							</image> -->
						 
							<text class="rank" v-if="item.rank==1" style="color: #EA5404;">{{item.rank}}</text>
							<text class="rank" v-else-if="item.rank==2"  style="color: #3D3A3A;">{{item.rank}}</text>
							<text class="rank" v-else>{{item.rank}}</text>
							<view class="user_box">
								<view>
									<image class="user_img"
										:src="item.headImageUrl || '@appstatic/my/my_icon_avatar_unlogin.png'" mode="">
									</image>
									<image class="avatar-bottom" src="@appstatic/my/my_icon_avatar_bottom.png" mode="">
									</image>
								</view>
								<view class="user_name">
									<view class="user_nickname">{{item.nickName}}</view>
									<!-- <view class="custom_card_sort" style="color: #ADB0AE;">--</view> -->
								</view>

							</view>
						</view>

						<view class="list_km">
							{{item.mile}}km
						</view>
					</view>

				</view>

			</view>

		</z-paging>
		<!-- 帮助 -->
		<u-popup :show="show" mode="center" @close="close">
			<view class="popup_content" v-if="showHelpTips">
				<view class="upopup_header">
					<image style="position: relative;right: 120rpx;" class="custom_card_bg"
						src="@appstatic/car/custom_card_bg.png" mode="">
					</image>
					<text class="upopup_title">排行说明</text>
				</view>
				<view class="upopup_content">
					<view>1. 排名统计每60分钟更新一次</view>
					<view>2. 在统计时间后变更开关状态，不影响历史 排名显示</view>
					<view>3. 在统计时间前有参与排名，即可分享</view>
				</view>
				<view @click="showHelp" class="upopup_confirm">知道了</view>
			</view>
		</u-popup>
		
		<!-- 分享内容 -->
		<u-popup :show="showSharePopup" mode="center" @close="close">
			<view class="popup_content">
				<view class="custom_card">
					<view class="custom_card_wraper">
						<image class="custom_card_bg" src="@appstatic/car/custom_card_bg.png" mode="">
						</image>
						<view class="custom_card_left">
							<view>
								<image class="user_img" :src="currentInfo.currentUser.userImages||'@appstatic/my/my_icon_avatar_unlogin.png'" mode=""></image>
								<image class="avatar-bottom" src="@appstatic/my/my_icon_avatar_bottom.png" mode="">
								</image>
							</view>
							<view class="user_name">
								<view>{{currentInfo.currentUser.nickName}}</view>
								<view class="custom_card_sort">第<text> {{currentInfo.currentUser.rank}} </text>名</view>
							</view>

						</view>
						<view class="custom_card_km">{{currentInfo.currentUser.mile}}km</view>
					</view>
					<view class="custom_card_bottom">
						<view>{{searchType=="day"?'今日':'本周'}}里程：{{currentInfo.currentUser.mile}}km
						</view>
						<view>
							<!-- 超越全国 93% 的摩友 -->
						</view>
					</view>

				</view>
				<image mode="widthFix" class="my_moto" src="@appstatic/img/my_moto.png"></image>
				<view class="qr_load">
					<image mode="widthFix" class="home_logo" src="@appstatic/img/logo_home.png"></image>
					<view>
						<image mode="widthFix" class="app_load" src="@appstatic/img/app_qrcode.jpg"></image>
						<image mode="widthFix" class="app_load" src="@appstatic/img/wx_qrcode.jpg"></image>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 切换排名区域 -->
		<u-modal :show="showCitySelect" @cancel="showCitySelect = !showCitySelect"  @confirm="confirmSelect" width="700rpx"
			:showCancelButton="true" confirmColor="#EA5404">
			<view class="location_wraper">
				<view class="change_city">切换区域</view>
				<view @click="changeProvince(0)" class="select_sort_city" style="border-bottom: 1px solid #e5e5e5;">
					<text>全国</text>
					<image v-show="searchProvince == 0" class="select_img" src="../../static/icon_select.png" mode=""></image>
				</view>
				<view @click="changeProvince(1)" class="select_sort_city">
					<text>本省(市、自治县)</text>
					<image  v-show="searchProvince == 1" class="select_img" src="../../static/icon_select.png" mode=""></image>
				</view>
			</view>
		</u-modal>
		<u-popup :show="showShare" class="share_popup" width="100%">
			<view class="popup">
				<view class="action-wraper">
					<text style="visibility: hidden;">确定</text>
					<text>分享到</text>
					<image @click="showShare = !showShare" src="@appstatic/community/x.png" mode=""></image>
				</view>
				<view class="share-wraper">
					<view class="item" @click="shareType(1)">
						<image src="@appstatic/community/share-1.png" mode="">
						</image>
						<text>微信</text>
					</view>
					<view class="item" @click="shareType(2)">
						<image src="@appstatic/community/share-2.png" mode="">
						</image>
						<text>朋友圈</text>
					</view>
					<view class="item" @click="shareType(3)">
						<image src="@appstatic/community/share-3.png" mode="">
						</image>
						<text>微博</text>
					</view>
					<view class="item" @click="shareType(4)">
						<image src="@appstatic/community/share_4.png" mode="">
						</image>
						<text>保存到本地</text>
					</view>
				</view>

			</view>

		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	export default {
		data() {
			return {
				tabsList: [{
					name: '日里程榜',
					type: 'day'
				}, {
					name: '周里程榜',
					type: 'week'
				}],
				title: '骑行排行',
				list: [],
				show: false,
				showHelpTips: false,
				showCitySelect: false,
				showShare: false,
				test: '',
				drawImg: '',
				currentInfo: {
					currentUser: {
						nickName: ''
					}
				},
				searchType: 'day',
				deviceId: uni.getStorageSync('deviceId')||'',
				provinceId: 0,
				navigationBarHeight: app.globalData.statusBarHeight + 44 + 'px',
				provinces:[],
				searchProvince:0,
				provinceIdProps:0,
				showSharePopup:false
			}
		},
		onLoad(options){
		
			if(!options.deviceId){
				uni.showToast({
					title: '请确认设备ID',
					duration: 2000,
					icon: 'none'
				})
				
			}else{
				this.deviceId = options.deviceId
				this.provinceId = options.provinceId
				this.provinceIdProps = options.provinceId
				
			}
		},
		mounted() {
			this.getProvinces()
			
			
			this.$nextTick(() => {
				// 触发下拉加载
				this.$refs.paging.reload();
			})
		},
		methods: {
			changeProvince(val){
				this.searchProvince = val
			},
			confirmSelect(){
				
				if(this.searchProvince==0){
					this.provinceId = 0
				}else{
					this.provinceId = this.provinceIdProps
				
				}
				console.log(this.searchProvince,this.provinceIdProps)
				this.showCitySelect = false
				this.queryListPersion()
				this.$refs.paging.reload();
			},
			getProvinces: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_GET_PROVINCE;
				var params = {
					"loginId": app.getUserId()
				}
				console.log(params, 'params')
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.provinces = res.data.ProvinceList
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
			
				});
			},
			shareType(type) {
				
				this.showShare = false
				var that = this
				var timer = setTimeout(()=>{
					that.toImage(type)
					timer = -1
					that.showSharePopup = false
				},500)
				
				this.show = false
			},
			toImage(type) {
				const that = this;
				/* 获取屏幕信息 */
				let ws = this.$mp.page.$getAppWebview();
				let bitmap = new plus.nativeObj.Bitmap('test');
				// 将webview内容绘制到Bitmap对象中
				ws.draw(
					bitmap,
					function(e) {
						/* 获取base64 */
						that.test = bitmap.toBase64Data();
						/* 加载base64编码 */
						bitmap.loadBase64Data(
							bitmap.toBase64Data(),
							function() {
								console.log('加载Base64图片数据成功');
								/* 保存图片 */
								bitmap.save(
									'_doc/share'+ new Date().getTime()+'.jpg', {},
									async (i) => {
											console.log('保存图片成功：' + JSON.stringify(i));
											uni.saveImageToPhotosAlbum({
												filePath: i.target,
												success: function() {
													/* 清除 */
													bitmap.clear();
													this.drawImg = i.target
													if (type == 1) {
													
													
													
														
														uni.share({
															provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
															scene: "WXSceneSession", //分享到聊天界面
															type: 5, //分享形式 5:小程序
															imageUrl: this.drawImg, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
															title: '欢迎体验派方机车',
															miniProgram: {
																id: 'gh_c784b84e778d', //微信小程序原始id
																path: '/pages/community/community',
																type: 0, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
																webUrl: 'https://www.pfmoto.com/app' //兼容低版本的网页链接
															},
															success: ret => {
																console.log(JSON.stringify(ret));
															},
															fail: ret => {
																console.log("fail" + JSON.stringify(ret));
															}
														});
														
													
													} else if (type == 2) {
														console.log('---------')
														uni.share({
															provider: "weixin",
															scene: "WXSceneTimeline",
															type: 0,
															href: "https://www.pfmoto.com/app",
													
															summary: '欢迎体验派方机车',
															imageUrl: this.drawImg,
															success: function(res) {
																console.log("success:" + JSON.stringify(res));
															},
															fail: function(err) {
																console.log("fail:" + JSON.stringify(err));
															}
														});
													} else if (type == 3) {
														uni.share({
															provider: "sinaweibo",
													
															title: '欢迎下载派方APP',
															summary: "欢迎下载派方APP",
															imageUrl: this.drawImg, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
															href: 'https://www.pfmoto.com/app',
															type: 0,
															success: function(res) {
																console.log("success:" + JSON.stringify(res));
													
															},
															fail: function(err) {
																console.log("fail:" + JSON.stringify(err));
													
															}
														});
													
													} else {
														uni.showToast({
															title: "保存成功",
															duration: 2000,
															icon: 'none'
														})
													}
												},
												fail(e) {

												}
											});
										},
										function(e) {
											console.log('保存图片失败：' + JSON.stringify(e));
										}
								);
							},
							function() {
								console.log('加载Base64图片数据失败：' + JSON.stringify(e));
							}
						);
					},
					function(e) {
						console.log('截屏绘制图片失败：' + JSON.stringify(e));
					}, {
						check: true, // 设置为检测白屏
						clip: {
							top: '100px',
							left: '0px',
							height: '100%',
							width: '100%'
						} // 设置截屏区域
					}
				);
			},

			confirm() {
				this.showCitySelect = false
				// this.toImage()
			},
			selectSort(val) {
				
				this.searchType = val.type
				this.$refs.paging.reload();
			},
			// 分享
			shareShow() {
				this.showShare = !this.showShare
				this.showSharePopup  = this.showShare
			},
			queryListPersion() {

				var _self = this
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_MILERANKING;

				var params = {

					"deviceId": this.deviceId,
					"provinceId": this.provinceId,
					"type": this.searchType
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						// _self.topicList = res.data.list;
						console.log(res.data.detail)
						_self.currentInfo = res.data.detail

					} else {
						uni.showToast({
							title: res.resultNote,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			queryList(pageNo, pageSize) {
				var _self = this
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_AllMILERANKING;

				var params = {
					"pageNum": pageNo -1,
					"pageSize": pageSize,
					"provinceId": this.provinceId,
					"type": this.searchType
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {

						_self.$refs.paging.complete(res.data.detail.dataList)

					} else {
						uni.showToast({
							title: res.resultNote,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
				this.queryListPersion()
			},
			showHelp() {
				this.show = this.showHelpTips = !this.show
			},
			changeCity() {
				this.searchProvince = this.provinceId
				this.show  = false
				this.showCitySelect = true
			},
			close() {
				this.show = this.showCitySelect = this.showHelpTips = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.home_logo {
		width: 160rpx;
	}

	.app_load {
		width: 120rpx;
		height: 120rpx;
		margin-left: 20rpx;
	}

	.qr_load {
		padding: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.my_moto {
		width: 100%;
		background-color: transparent;
	}
	.rank{
		font-size: 56rpx;
		font-weight: 700;
		line-height: 64rpx;
		color: #ADB0AE;
		// font-style:italic;
		margin-right: 32rpx;
		
	}
	.upopup_confirm {
		width: 280upx;
		height: 72upx;
		background: #EA5404;
		border-radius: 4upx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		color: #ffffff;
		line-height: 72upx;
		text-align: center;
	}

	/deep/.u-modal {
		width: 100% !important;
	}

	.location_wraper {
		width: 100%;

	}

	.upopup_content {
		padding: 30rpx;
		background-color: transparent;
	}

	.upopup_content view {
		margin-bottom: 20rpx;
	}

	.upopup_title {
		position: absolute;
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 700;
		font-size: 16px;
		line-height: 23px;
		display: flex;
		align-items: center;
		top: 19px;
		left: 22px;
		color: #FFFFFF;
	}

	.arrow_bottom {
		width: 14rpx;
		height: 7rpx;
		position: relative;
		height: 3px;
		top: -3px;
		left: 5px;
	}

	.upopup_header {
		width: 100%;
		height: 116rpx;
		background: #ff6f22;

		overflow: hidden;
		position: relative;
	}

	.select_sort_city {
		padding: 40rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-style: normal;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 40rpx;




		color: #828282;
	}

	/deep/.u-popup__content {
		width: 80%;

		border-radius: 8rpx;

	}

	/deep/.share_popup .u-popup__content {
		width: 100%;

		border-radius: 8rpx;

	}

	/deep/.u-modal__content {
		padding: 24rpx 50rpx 0rpx 50rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.tabs {
		position: relative;
	}

	/deep/.z-paging-content {
		height: calc(100vh - 200rpx);
	}

	/deep/.u-tabs__wrapper__nav__item {
		width: 50%;
	}

	/deep/.u-tabs__wrapper__nav__line {
		background-color: #EA5404 !important;
	}

	.share-wraper {
		display: flex;

		justify-content: space-around;
		padding: 40rpx;
	}

	.share-wraper .item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.share-wraper .item image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 20rpx;
	}

	.share-wraper .item text {
		font-weight: 400;
		font-size: 24rpx;
		line-height: 34rpx;
		text-align: center;
		letter-spacing: -0.24px;
		color: #3D3A3A;
	}

	.action-wraper {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}

	.action-wraper text {
		font-size: 32rpx;
		font-weight: 600;
		color: #3d3a3a;
	}

	.action-wraper image {
		width: 48rpx;
		height: 48rpx;
	}

	.list-item-left {
		display: flex;
		align-items: center;
	}

	.list_km {
		font-family: 'Arial';
		font-style: italic;
		font-weight: 400;
		font-size: 40rpx;
		line-height: 46rpx;


		color: #3D3A3A;
	}

	.list {
		padding-top: 30rpx;
	}

	.select_img {
		width: 28rpx;
		height: 20rpx;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1px solid #EDEDED;
	}

	.list_number {
		width: 40rpx;
		height: 24rpx;
		margin-right: 30rpx;
	}

	.change_city {
		font-weight: 600;
		font-size: 32rpx;
		line-height: 44rpx;
		color: #333333;
		mix-blend-mode: normal;
		opacity: 0.9;
	}

	.custom_card_bottom {
		position: absolute;
		width: calc(100% - 40rpx);
		left: 0;
		bottom: 0;
		display: flex;
		background-color: rgb(232, 154, 95);
		justify-content: space-between;
		border-radius: 0px 0px 8rpx 8rpx;
		align-items: center;
		padding: 10rpx 20rpx;
		color: #ffffff;
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 500;
		font-size: 24rpx;
		line-height: 34rpx;
		/* identical to box height */



		/* 力帆-白 */

		color: #FFFFFF;
	}

	.custom_card_sort {
		font-size: 26rpx;
		font-weight: 400;
	}

	.custom_card_sort text {
		font-size: 28rpx;
		font-weight: 700;
	}

	.custom_card_bg {
		width: 686rpx;
		height: 200rpx;
		position: absolute;
		top: -20rpx;
		right: -20rpx;
	}

	.wraper {
		padding: 30rpx;

	}

	.custom_card_left {
		display: flex;
		align-items: center;
	}

	.custom_card {
		width: calc(100% - 40rpx);
		height: 160rpx;
		background: rgba(255, 111, 34, 1);
		border-radius: 8rpx;

		padding: 20rpx;
		position: relative;
	}

	.custom_card_help {
		width: 24rpx;
		height: 24rpx;
		margin-left: 20rpx;
		position: relative;
		top: 2rpx;
	}

	.custom_card_wraper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.user_img {
		width: 96rpx;
		height: 96rpx;
		border: 2px solid #ffffff;
		border-radius: 100%;
	}

	.avatar-bottom {

		width: 14px;
		height: 14px;
		position: relative;
		left: -26rpx;
		top: 0;

	}

	.custom_card_km {
		font-family: 'Arial';
		font-style: italic;
		font-weight: 700;
		font-size: 48rpx;
		line-height: 56rpx;
		/* identical to box height */
		position: relative;
		z-index: 10;

		/* 力帆-白 */

		color: #FFFFFF;

		text-shadow: 0px 0px 2px #F26203;
	}

	.user_box {
		display: flex;
		align-items: center;
	}

	.user_box .user_nickname,
	.user_box view {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 400;
		font-size: 32rpx;
		line-height: 46rpx;


		color: #3D3A3A;
	}

	.user_name {
		font-family: 'Noto Sans SC';
		font-style: normal;
		font-weight: 500;
		font-size: 32rpx;
		line-height: 46rpx;


		/* 力帆-白 */

		color: #FFFFFF;
	}
</style>
